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Een website met Joomla — deel 2 


Hoeda? Met Joomla! 


In deel 1 van de cursus Joomla hebben we het systeem geïnstalleerd en geconfigureerd. Nu gaan we verder met het 
toevoegen van afbeeldingen en tonen we je hoe je enquêtes maakt. Daarnaast hebben we het ook over het samen- 
werken met andere leden van de club… 4 rrenerick corors 


p 


WAT DOEN WE? | 


WAARMEE? 


DUUR? 


MOEILIJKHEID? 


oomla is een CMS, en dat staat voor Content 

Management System — wat zoveel betekent 
als een systeem om inhoud te beheren. Vroeger 
werden deze systemen uitsluitend gebruikt voor 
grote bedrijfswebsites, want zo’n CMS kostte al snel 
tienduizenden euro's. Een CMS werkt namelijk erg 
makkelijk: bepaalde delen of pagina's van de site 
kunnen beheerd worden door verantwoordelijken 
die verder niets van html of webdesign moeten 
kennen. Als webmaster zorg jij er gewoon voor dat 
de sjablonen en de pagina’s zelf online staan. Let 
wel: je co-webmasters hebben dan misschien wel 
niet te veel webdesignkennis nodig, maar het is wel 


handig als jij zelf een klein beetje je weg kent in webmasterland. 
Sinds enkele jaren zijn CMS-systemen, zoals Joomla www.joomla.org, voor 
iedereen toegankelijk. Joomla is bijvoorbeeld helemaal gratis, en je kan 
het op zowat elke webserver installeren. In het eerste deel van deze 
cursus installeren we Joomla en beginnen we met de ontwikkeling van 
een website van De Treiners vzw, een (fictieve) vereniging van enkele 
enthousiastelingen op het gebied van miniatuur- en modelbouwtrein- 
tjes! Hoe je zo’n installatie aanpakt, en wat je precies nodig hebt, kon 
je leren in het eerste deel van deze cursus (in Clickx 134). 

Dit tweede deel gaat een stapje verder met de ontwikkeling van een 
website voor De Treiners vzw, een (fictieve) vereniging van enkele 
enthousiastelingen op het gebied van miniatuur- en modelbouwtrein- 
tjes! 


d 


Afbeeldingen uploaden 


Een website is niets of weinig zonder 
goede inhoud of teksten. Je fleurt een 
tekst best op met één of meerdere af- 
beeldingen. Je kan in Joomla niet zomaar 
afbeeldingen uploaden via ftp, maar doet 
het gewoon in het venster waar je tekst 
ingeeft. Ga bijvoorbeeld naar Content, Con- 
TENT BY SECTION, ACTIVITEITEN, ACTIVITEITEN 
Irems. Klik nu op een item om het te 
openen. Klik vervolgens in de knoppen- 
balk op UpLoap. Daarna klik je op BLADEREN 
en ga je op zoek naar de afbeelding op je 
computer. We raden je aan om de afbeel- 
ding vooraf bij te knippen, te verkleinen 
en te bewerken. Klik tenslotte op UpLoan. 


Es | http://modelbouw.click.… 3 (lied 


File Upload : 


|L Bladeren... 
Upload |Max size = 8M 


® internet 


Eerst moet je met de browser de afbeelding 
uploaden. 
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Afbeeldingen toevoegen 


Klik op het tabblad Imaces. Selecteer de afbeelding onder Gatrery Images en klik op >>. Klik 
vervolgens op de naam van de afbeelding onder Content Images. Daarna kan je de eigenschap- 
pen van de afbeelding aanpassen onder Epi THE image seLEctED. Met Atren bepaal je hoe de 
afbeelding horizontaal uitgelijnd moet worden. We raden je aan steeds een Aur rexT in te 
vullen (bijvoorbeeld Kerstorner). Je kan eventueel ook een rand (gorper) toevoegen, en zelfs 
een caption of onderschrift gebruiken. Dit moet je dan niet meer in het tekstvenster zelf 
doen. Ben je klaar, klik dan op Apeuy. 

Er gebeurt niets… want je moet nog de plaats van de afbeelding in de tekst bepalen. Ga met 
de cursor op de juiste plaats staan in Intro Text of Main Text en klik op de knop INSERT IMAGE 
(onder het tekstveld). De tekst {mosrmace} wordt nu ingevoegd. Wil je meerdere afbeeldingen 
invoegen, zorg dan dat de volgorde onder Content Imaces klopt, en voeg een aantal keer 
{mosrmace} in. 


veach 


Bezoek de website voor 


info over modeltreinen 


Newsflash 
rates ans | staen | 
ea Kerstler 24/12/2096 Kerstdiner 24/12/1009 


2006 


+ 2004 Kerstdiner 24/12/2006 Hays 


Op ons kerstdiner vord je getrakteerd op alias wat met 
vete’: modeboustreintjas te maken heeft! Je brjgt niet alleen de traditionele 
Madelbouwkalkoen (ware grooctter), maar ook 


Het resultaat 

mag er zijn. met 
“caption” onder de 
afbeelding. 


Parameters wijzigen 


Zoals je kan zien in de vorige afbeelding, 
zijn er boven elke tekst kleine icoontjes: 
klikt een bezoeker op het eerste icoon- 
tje, dan wordt de tekst automatisch om- 
gezet in pdf. Het tweede icoontje geeft 
een printvoorbeeld weer, terwijl het der- 
de de bezoeker in staat stelt om de in- 
houd van die pagina naar een vriend of 
kennis te mailen. Deze opties krijg je er 
zomaar bij. Je kan echter bepalen dat 
sommige pagina's deze icoontjes niet 
hebben, bijvoorbeeld als het om een zelf 
geschreven verhaal gaat dat je niet mak- 
kelijk in pdf wil laten omzetten. Open het 
Content ITEM en klik op het tabblad Para- 
METERS. Onderaan kan je het PDF Icon, 
Print Icon en EmarL Icon verbergen door 
op Hie te klikken. Je kan er trouwens 
ook voor kiezen om de datum niet te 
publiceren door bij CreaTED DATE AND TIME 
en Moprriep Dare EN Time Hipe te kiezen. 

Wil je trouwens je website snel bekijken, 
dan hoef je niet steeds twee browserven- 
sters open te hebben. Het volstaat om op 
Site, Preview, ÍN NEW WINDOW te klikken. Je 
kan een content item ook apart bekijken 
door in de knoppenbalk op Preview te 


Newsflash! 


Op de homepagina zie je het veld News- 
FLASH staan. Ideaal voor het laatste 
nieuws.… maar het vakje blijft leeg. Je 
kan dit makkelijk aanpassen: ga naar 
Mopures, Site Mopures en klik op News- 
FLASH. Onder PARAMETERS, Cateaory kies je 
de bron van de nieuwtjes, in ons geval 
Activireiten/2006. Wil je meer dan één 
item in de Newsflash-lijst, tik het aan- 
tal dan in onder No. or rrems. 


Enquêtes maken 


Het is altijd leuk voor bezoekers om inspraak 
te hebben. Dat kan met online enquêtes of 
‘polls’. Op de homepagina zie je een standaard- 
enquête staan, en die wil je uiteraard aanpas- 
sen. Dat gaat erg makkelijk. Ga naar Compo- 
NENTS, Pours en kies de eerste enquête. Vul nu 
de enquête in: de vraag tik je in onder Tire, 
en alle antwoorden onder Oprrons. Je kan tot 
12 mogelijke antwoorden geven, maar wij 
raden je aan het op vier of vijf te houden. 
Interessant is ook Las. Hier kan je invullen 
hoe vaak iemand mag stemmen. Kies je 
86400 (de standaardwaarde), dan mag het 
maximaal één keer per dag. Standaard wordt 
de enquête op de homepagina weergegeven, 
maar via SHow ON ITEMS ON MENU kan je een 
andere pagina kiezen. Meerdere pagina’s zijn 
ook mogelijk; hou gewoon Crru ingedrukt. 
Iedere bezoeker kan nu stemmen en krijgt 


SAMEN DE SITE ONDERHOUDEN 


meteen de resultaten te zien in een nette 
grafiek. Je kan ook gewoon op ResuLrs klikken 
om meteen de resultaten te zien. Met de 
Administrator kan je een enquête ook 
stopzetten, via Pusrisneo, No. 


Vis VAR Loge aar 
rn BRB 
Z Poll: Edit 
betse 
etende mammae beten om ke bijven? pre 
z 
OO |onecnda between veter) 
None 
hatred Oe © von 
Unatagred 
Nats, meh rappel marmer | Achvteten 
marmer | «006 
€10 marmers | «20007 
marmers ud verden 
: en mime | «Feen 
marmer) Vazen 
eo marmer Fotos 
marmers | « 2006 
Men abede rtegered marmer | «200 
marmers | 008 
marmers Oven ora 
marmer | Doelseing 
marmers | «Mito 
marmerns| …Besas 
maarr |Contact 
marmers «Gegevens 
| Roue 


Een enquête aanmaken doe je via de Administrator. 


klikken. 
CPubisting images {Parameters | metainfo |(Linktomenu) _ 

Parameter Control 

* These Parameters only control what you see when you click to view an 

item Fully * 
Page Class Suffix 
Back Button Use Global 
Page Title O Hide © show 
Linked Titles | Use Global 
Intro Text O Hide © show 
Section Name © Hide O Show 
Section Name Linkable © no O ves 
Category Name © Hide O show 
Category Name Linkable © no O ves 
Jem Rating Use Global 
Author Names Use Global «| 
Created Date and Time Use Global Sl 
Modified Date and Time Use Global 
PDE Ion Use Global 
Print Icon | Use Global 
Email Icon Use Global 


Zo ziet onze website er uit na deel 1. 


Contactformulier toevoegen 


Onder Contact wil je waarschijnlijk ook een con- 
tactformulier voorzien. Met Joomla moet je dit 
niet zelf opbouwen. Klik op Components, Contacts, 
Manage Contacts. Vul op het formulier de contact- 


gegevens in die je wil weergeven op de website. 
Voor ons zijn naam (Trerners vzw) en e-mailadres 
voldoende. Ga vervolgens naar Menu, MAINMENU en 
klik op New. Kies Link — CONTACT ITEM onder Compo- 


EE TS eef de Pagine een naam, bijvoorbeeld 
OM mee FormuLrer. Vervolgens kies je de Contacr-com- 
EE bt 8 


ponent onder Contact To Link. Daarna kies je 
het ParENT ITEM — in dit geval is dat Conracr. 


Klik vervolgens op Save. Onder Contact, For- 
MuLIER vind je het formulier nu terug op de 
website. Het formulier wordt automatisch 
verstuurd naar het e-mailadres dat je in de 
component hebt ingegeven. Bovendien wordt 
het e-mailadres niet op de pagina weerge- 
geven, wat je ongetwijfeld heel wat spam 


Een contactformulier aanmaken is zó gebeurd. 


bespaart. 
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CURSUS 


c 


Fe Host Revlewed eren | 


JOOMLA UITBREIDEN MET MAMBOTS En met 
Omenelen Cerngartes GOOOD 10 votes 12 revers 
Adds a new button next to “Messages” and “Orâne” cons to auickty access the pn mn | eed 
stes kontend. No more ssbmerus, butten ts ways in easy reach from any este 
sr : soeen, even when the menu 5 , 30 for enor , vas ect à content tem, 

Joomla bevat heel wat mogelijkheden, maar je kan het systeem rd tedere reerde | 
header” position. 

erg makkelijk nog uitbreiden met zogenaamde Mambots. Dit zijn pr Adan rte 

stukjes programmacode die door anderen geschreven zijn en die ps EE En 


jij gewoon kan “inpluggen’ op jouw website. Er zijn honderden 
mambots en je kan de meeste gratis downloaden op http://exten- 
sions.joomla.org. Zo installeerden wij in een wip de Google Analy- 
tics-plugin, om onze volledige website aan te melden bij de 
gratis teller Google Analytics http://analytics.google.com. Een exten- 
sie installeren is erg eenvoudig: download de mambot of extensie 
en ga naar InstatLers, Mameors. Klik op BLADEREN, ga naar het zip- 
bestand van de mambot en upload het. Daarna vind je de mambot 
onder het menu Mamsors, waar je de nodige instellingen kan doen. 
Andere interessante mambots zijn bijvoorbeeld een uitgebreid 
gastenboek, een fotogalerij met heel wat opties, een andere 


GOB 16 vor 
aatganraecs veeoon 1.2 
erport artgannaes 2.0 aha, et = 

mode e corrponaet your access He form — 


poet data in werd Sa, erport Morra Barras, 


Adverting Denrers | GN GP 


Sigs Online Business Index 2 (SOB 2) EER 


genes, which can contan abestegeres. Ons entry can be onteeed in up to fwo 
categories. Tha companies entee theenselves in the nde. à sacurty code (ecumty 
trage) ie walabie for pan protacton. Registered uraes can modify or delete thar 
entries. vang the integrated Category & Entry Manager n the backend al categeres and 
entras can be ma … 


Lost Password? 
No account yet? Regster 


Wio's Ondine 


We have 425 guests and 45 
members orâne stegery: Dwectoey | ARIGA 1 NED 


t Lak 
in th momact my ste « down and for domrkoad \ of Oros» 
5 


Er zijn honderden mambots om de mogelijkheden van Joomla uit te 


WYSIWYG-editor, en ga zo maar door. 


Anderen laten meewerken 


Op de homepagina is je wellicht het Loen Form 


opgevallen. Hier kunnen medebestuurders gia n B RB 
van de club zich inloggen om inhoud aan de Rose: eer 
website toe te voegen of pagina’s te wijzigen. eres Pama 
Vooraleer dit mogelijk is, moet jij ze natuur- if En vs Fret wrr a 
Dad hort mara te Gammel termatten, 


lijk eerst de nodige rechten geven. Dat gaat 
via Site, User Manaaer. Klik op New en geef de 
naam van de gebruiker in. Geef daarna een 
gebruikersnaam in, een wachtwoord en een 
e-mailadres. Erg belangrijk is Grove. Dit zijn 
de mogelijkheden: 


e Puguic FRONTEND: de gebruiker kan niet op 
de administratiesite, maar kan wel inhoud 
wijzigen, afhankelijk van het ‘level’. Er zijn 
4 verschillende levels: 

v/ Reoisterep: Een geregistreerde gebruiker. 
Inhoud aanpassen of aanmaken is onmoge- 
lijk. 

v/ Aurnor: Deze gebruikers kunnen nieuwe 
inhoud toevoegen en eigen inhoud aanpas- 
sen. Content moet steeds gepubliceerd 
worden door een Publisher of Administra- 
tor. 

v/Epiror: Deze gebruikers kunnen alle in- 
houd aanpassen en nieuwe inhoud toevoe- 
gen. Content moet steeds gepubliceerd 
worden door een Publisher of Administra- 
tor. 

v/ Pusuister: Deze gebruikers kunnen inhoud 
aanpassen, toevoegen en ook publiceren. 

e ADMINISTRATOR BAckEND: deze gebruikers 
kunnen ook op de Administrator-pagina's 
inloggen. Er zijn drie soorten administra- 
tors: 

e/ Manacer: Nieuwe inhoud kan toegevoegd 
worden door deze gebruikers. 
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breiden. 


ve 'âR 


kogeet ater 


vwb leesn 


Een user aanmaken. 


V/ ApMinistraror: Deze gebruikers kunnen zo- 
wat alles doen. 

V/ Super AnMinistRATOR: Deze gebruikers kun- 
nen alles doen wat jij ook kan. 


We raden je aan de meeste gebruikers Eprror 
of PusLisher te maken. Ten slotte moet je ook 
nog de Eprror kiezen waarmee pagina’s in de 
frontend gewijzigd kunnen worden. Kies 
TinyMCE om een goede WYSIWYG-editor ter 
beschikking te stellen. Klik daarna op Save. 
Eens een gebruiker is ingelogd, ziet hij of zij 
het User Menu. Via Sugmit News kan de gebrui- 
ker een nieuwsbericht toevoegen. Interes- 
santer is echter de mogelijkheid om inhoud 
te wijzigen. Het volstaat om gewoon op het 
icoontje naast een titel te klikken. De gebrui- 
ker krijgt nu een pagina te zien die sterk lijkt 
op de Administrator-pagina's waarmee hij de 
inhoud kan wijzigen. Wil je meer weten over 
collaboratie, dan raden we je aan de docu- 
mentatie te lezen op www.joomla.org. 


No Contact etads rk 1o Den User 
San Components > Cortact » Manage Cortactr er oetan 


CONCLUSIE 


Heb je beide afleveringen van deze cursus 
gevolgd, dan heb je nu al een mooi uit- 
ziende en goed werkende website met 
extraatjes als collaboration, enquêtes, 
contactformulieren, recente nieuwsbe- 
richten, enzovoort. Je kan echter heel veel 
méér met Joomla. We raden je aan de 
Mambot-pagina's te bekijken, en ook meer 
in detail in te gaan op de Administrator- 
interface. Met Joomla ben je sneller bezig 
met de inhoud van je website dan met de 
website zelf. En dat is toch wat telt! Suc- 
ces ermee! « 


VAKTAAL 


WYSIWYG: What You See Is What You Get. Met een 
WYSIWYG-editor zie je meteen hoe het eindresultaat er zal 
uitzien. Je moet dus geen ingewikkelde code gebruiken en 
je bekijkt onmiddellijk het resultaat. Veel webbouwpakket- 
ten zijn uitgerust met een WYSIWYG-module, maar ook 
tekstverwerkers als Word zijn WYSIWYG-programma's. 


